<template>
  <div class="home">
    <section class="hero">
      <h1 class="hero-title">欢迎来到AI侦探游戏</h1>
      <p class="hero-subtitle">运用你的推理能力，破解各种神秘案件</p>
      <div class="hero-actions">
        <router-link to="/cases" class="btn btn-primary">开始游戏</router-link>
        <router-link to="/leaderboard" class="btn btn-outline">查看排行榜</router-link>
      </div>
    </section>
    
    <section class="features">
      <div class="feature-grid">
        <div class="feature-card">
          <div class="feature-icon">🔍</div>
          <h3>案件调查</h3>
          <p>分析线索，审问嫌疑人，找出真相</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🧠</div>
          <h3>AI助手</h3>
          <p>智能AI助手提供破案建议和线索</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🏆</div>
          <h3>排行榜</h3>
          <p>与其他玩家竞争，成为顶级侦探</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">👥</div>
          <h3>好友系统</h3>
          <p>添加好友，分享破案心得</p>
        </div>
      </div>
    </section>
    
    <section v-if="onlinePlayers.length > 0" class="online-players">
      <h2>在线玩家</h2>
      <PlayerList
        :players="onlinePlayers"
        title=""
        :show-add-friend="playerStore.isLoggedIn"
        :show-pagination="false"
        @add-friend="handleAddFriend"
        @view-profile="handleViewProfile"
      />
    </section>
    
    <section class="leaderboard-preview">
      <h2>排行榜预览</h2>
      <PlayerList
        :players="topPlayers"
        title=""
        :show-add-friend="playerStore.isLoggedIn"
        :show-pagination="false"
        @add-friend="handleAddFriend"
        @view-profile="handleViewProfile"
      />
      <div class="more-link">
        <router-link to="/leaderboard">查看完整排行榜 →</router-link>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { usePlayerStore } from '@/stores/player';
import { PlayerList } from '@/components';
import type { Player } from '@/entities/Player';

const router = useRouter();
const playerStore = usePlayerStore();

// 计算属性
const onlinePlayers = computed(() => {
  return playerStore.onlinePlayers.slice(0, 6);
});

const topPlayers = computed(() => {
  return playerStore.getLeaderboard(6);
});

// 方法
const handleAddFriend = async (playerId: string) => {
  try {
    await playerStore.addFriend(playerId);
    alert('好友添加成功！');
  } catch (error) {
    alert('添加好友失败：' + (error as Error).message);
  }
};

const handleViewProfile = (player: Player) => {
  router.push(`/player/${player.id}`);
};

onMounted(async () => {
  // 确保玩家数据已加载
  if (playerStore.players.length === 0) {
    try {
      await playerStore.loadPlayers();
    } catch (error) {
      console.error('加载玩家数据失败:', error);
    }
  }
});
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
}

.hero {
  text-align: center;
  padding: 64px 24px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  border-radius: 16px;
  margin-bottom: 48px;
}

.hero-title {
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 16px 0;
}

.hero-subtitle {
  font-size: 20px;
  margin: 0 0 32px 0;
  opacity: 0.9;
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.btn {
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-primary {
  background: white;
  color: var(--color-primary);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-outline {
  background: transparent;
  color: white;
  border: 2px solid white;
}

.btn-outline:hover {
  background: white;
  color: var(--color-primary);
}

.features {
  margin-bottom: 48px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.feature-card {
  background: var(--color-background);
  padding: 32px 24px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
}

.feature-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.feature-card h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--color-text);
}

.feature-card p {
  color: var(--color-text-secondary);
  margin: 0;
}

.online-players,
.leaderboard-preview {
  margin-bottom: 48px;
}

.online-players h2,
.leaderboard-preview h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 24px 0;
  color: var(--color-text);
}

.more-link {
  text-align: center;
  margin-top: 24px;
}

.more-link a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}

.more-link a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .hero {
    padding: 48px 16px;
  }
  
  .hero-title {
    font-size: 36px;
  }
  
  .hero-subtitle {
    font-size: 18px;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .feature-grid {
    grid-template-columns: 1fr;
  }
}
</style>